<template>
  <div>
    <div class="my_team" v-if="myTeam">
      <div class="team_card">
        <h3>团队成员</h3>
        <div>
          <span>队长： </span>
          <div @click="lookStusentInf(team.cap_id)" class="click">
            <img src="../../assets/img/logo.png" alt="" />
            <span>{{ team.cap }}</span>
          </div>
          <span>队员：</span>
          <div
            v-for="(member, i) in team.t_member"
            :key="i"
            @click="lookStusentInf(member.s_id)"
            class="click"
          >
            <img src="../../assets/img/logo.png" alt="" />
            <span>{{ member.s_name }}</span>
          </div>
        </div>
      </div>
      <div>
        <h3>团队公告</h3>
        <p class="team_notice">
          <i class="el-icon-message-solid">:</i>{{ team.notice }}
        </p>
        <div class="teamMesBtn">
          <el-button @click="openLeaveWord" type="primary" round
            >发布队伍消息</el-button
          >
        </div>
      </div>
      <div v-if="team.cap_id == u_id">
        <h3>申请入队</h3>
        <div v-if="join.length == 0">暂无申请！！</div>
        <div
          class="team_join"
          v-for="joinData in join"
          :key="joinData.team_join_id"
        >
          <div @click="lookStusentInf(joinData.s_id)" class="click">
            <img src="../../assets/img/logo.png" alt="" />
            <span>{{ joinData.s_name }}</span>
          </div>
          <p>我希望加入本队伍望同意！！</p>
          <p>
            <el-button
              size="small"
              type="success"
              @click="teamJoin(joinData.team_join_id, joinData.s_id, 1)"
              round
              >同意</el-button
            >
            <el-button
              size="small"
              type="danger"
              @click="teamJoin(joinData.team_join_id, joinData.s_id, 0)"
              round
              >拒绝</el-button
            >
          </p>
        </div>
      </div>
      <div>
        <h3>项目名称：{{ project.p_title }}</h3>
        <ul class="project_mes">
          <li>指导老师：{{ project.t_name }}</li>
          <li>项目难度：{{ project.p_dif }}</li>
          <li>所需人数：{{ project.p_peopleNum }}</li>
          <li>项目周期：{{ project.p_time }}</li>
        </ul>
        <h3>项目简介：</h3>
        <p class="project_synopsis">{{ project.p_synopsis }}</p>
        <h3>项目要求：</h3>
        <p
          class="project_require"
          v-for="(require, i) in project.p_require"
          :key="i"
        >
          ({{ i + 1 }}){{ require }}
        </p>
        <h4>项目进度：</h4>
        <div class="team_plan">
          <div>
            <span>今日进度</span>
            <el-progress
              type="circle"
              :percentage="team.todyProjectContribution"
            ></el-progress>
          </div>
          <div>
            <span>项目总进度</span>
            <el-progress
              type="circle"
              :percentage="team.projectContribution"
              color="#39d37f"
            ></el-progress>
          </div>
        </div>
        <div v-if="team.cap_id == u_id" class="issueBtn">
          <el-button
            class="showbtn"
            v-if="team.issue == 1"
            @click="teamIssue(team.team_id)"
            type="danger"
            >取消发布</el-button
          >
          <el-button
          class="showbtn"
            v-if="team.issue == 0"
            @click="teamIssue(team.team_id)"
            type="success"
            >发布队伍</el-button
          >
          <el-upload
          class="upload-demo"
          action="http://localhost:3000/upload/single"
          :file-list="fileList"
          :on-success="upData"
          v-if="myTeam"
        >
          <el-button size="small" type="primary">上传申请</el-button>
          <div slot="tip" class="el-upload__tip">
            上传申请后等待专家审核！！
          </div>
        </el-upload>
        </div>
        
      </div>
    </div>
    <div class="null" v-if="!myTeam">
      你还未加入任何还没有队伍！！快去广场看看吧！
    </div>
    <el-dialog title="队伍留言" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="队伍留言">
          <el-input v-model="form.leaveWord" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelWriteLeaveWord">取 消</el-button>
        <el-button type="primary" @click="writeLeaveWord()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      u_id: "",
      team: {},
      project: {},
      join: [],
      myTeam: false,
      dialogFormVisible: false,
      form: {
        leaveWord: "",
      },
      fileList:[]
    };
  },
  mounted() {
    var token = localStorage.getItem("token");
    this.u_id = token.substring(1, token.length - 1).split("#")[1] * 1;
    this.getTemeParticulars();
  },
  methods: {
    getTemeParticulars() {
      var token = localStorage.getItem("token");
      var s_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      axios
        .post(`http://localhost:3000/student/myTeam`, {
          s_id,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.myTeam = true;
            ret.data.project.p_require = ret.data.project.p_require.split("//");
            this.project = ret.data.project;
            this.team = ret.data.team;
            this.join = ret.data.join;
            this.team.todyProjectContribution = 30;
            this.team.projectContribution = 77;
          }
        });
    },
    // 上传结业报告
    upData(response) {
      const fileName = response.filename;
      axios
        .post(`http://localhost:3000/upload/upFinish`, {
          fileName,
          p_id: this.project.id,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.$message({
              showClose: true,
              message: "上传成功！！！！",
              type: "success",
            });
          }
        });
    },
    // 查看学生信息
    lookStusentInf(id) {
      var token = localStorage.getItem("token");
      var u_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      if (id == u_id) {
        this.$router.push({ path: "/MyInf" });
      } else {
        this.$router.push({ path: "/StudentInf", query: { student_id: id } });
      }
    },
    // 发布队伍
    teamIssue(team_id) {
      axios
        .post(`http://localhost:3000/student/teamIssue`, {
          team_id,
          t_issue: this.team.issue == 1 ? 0 : 1,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.team.issue = this.team.issue == 1 ? 0 : 1;
            this.$message({
              showClose: true,
              message: "操作成功",
              type: "success",
            });
          }
        });
    },
    // 入队申请处理
    teamJoin(id1, id2, index) {
      axios
        .post(`http://localhost:3000/student/teamJoinDispose`, {
          index,
          team_id: this.team.team_id,
          student_id: id2,
          team_join_id: id1,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.$message({
              showClose: true,
              message: "操作成功",
              type: "success",
            });
          }
        });
    },
    // 写留言三件套
    cancelWriteLeaveWord() {
      this.dialogFormVisible = false;
      this.form.leaveWord = "";
    },
    openLeaveWord() {
      this.dialogFormVisible = true;
    },
    writeLeaveWord() {
      if (this.form.leaveWord == "") {
        this.$message({
          showClose: true,
          message: "留言不能为空！！",
          type: "error",
        });
      } else {
        var token = localStorage.getItem("token");
        var student_id = token.substring(1, token.length - 1).split("#")[1] * 1;
        var time = new Date().toLocaleString();
        axios
          .post(`http://localhost:3000/student/teamMes`, {
            student_id,
            team_mes: this.form.leaveWord,
            time,
            team_id: this.team.team_id,
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.$message({
                showClose: true,
                message: "发布留言成功",
                type: "success",
              });
              this.cancelWriteLeaveWord();
            }
          });
      }
    },
  },
};
</script>

<style scoped>
.my_team {
  width: 90%;
  margin: 20px auto;
}
.my_team > div {
  margin-bottom: 20px;
  box-sizing: border-box;
  padding: 10px 20px;
  border-radius: 20px;
  border: 1px solid #ddd;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.my_team > div h3 {
  font: 18px/40px "";
  font-weight: 700;
  color: #303133;
}
.team_card {
  border-radius: 10px;
  padding: 0 10px;
}
.team_card img {
  background-color: #fff;
}
.team_card > h4 {
  height: 24px;
  font-weight: 700;
  font: 18px/24px "";
}
.team_card > div {
  margin-top: 5px;
  height: 60px;
  display: flex;
  align-items: center;
}
.team_card > div > span {
  font-size: 18px;
  display: inline-block;
}
.team_card > div > div {
  display: inline-block;
  margin: 0 20px;
}
.team_notice {
  font: 18px/30px "";
  margin: 20px;
}
.team_notice > i {
  padding: 0 10px;
  color: #f56c6c;
}
.project_mes {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}
.project_mes > li {
  width: 50%;
  padding: 10px 20px;
  box-sizing: border-box;
}
.project_synopsis {
  padding: 10px 20px;
  text-indent: 2em;
  line-height: 26px;
}
.project_require {
  padding: 10px 20px;
  text-indent: 2em;
  line-height: 26px;
}
.project_btn {
  text-align: right;
}
img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ddd;
}
.team_plan {
  width: 50%;
  display: flex;
  justify-content: space-around;
}
.issueBtn {
  display: flex;
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.teamMesBtn {
  position: absolute;
  right: 150px;
  bottom: 30px;
}
.team_join {
  display: flex;
}
.team_join p {
  font-size: 18px;
  width: 40%;
  text-align: center;
  padding-top: 20px;
}
.showbtn{
  width: 80px;
  height: 30px;
  padding: 0;
  font-size: 13px;
  margin-right: 20px;
}
img {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #ddd;
}
</style>
